<template>
  <div class="app-container">
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="formInline">
          <div>
            <el-form-item>
              <el-input v-model="formInline.BranchName" placeholder="店铺名称 "></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="PurchaseGetBranchList()">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-col>

      <el-table :data="PurchaseList" border style="width: 100%" v-loading="PurchaseListLoading">
        <!--:summary-method="getSum"-->
        <el-table-column prop="BranchId" label="店铺ID" align="center"></el-table-column>
        <el-table-column prop="BranchName" label="店铺名" align="center"></el-table-column>
        <el-table-column prop="AgentId" label="店的类型" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.AgentId==''">直营店</span>
              <span v-if="scope.row.AgentId!=''">代理商店</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="BranchMobile" label="联系电话" align="center"></el-table-column>
        <el-table-column label="查看销售记录" align="center">
          <template slot-scope="scope">
            <el-button type="info" @click="handleShop(scope.row.BranchId,0)" size="small">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="查看库存" align="center">
          <template slot-scope="scope">
            <el-button type="info" @click="handleLook(scope.row)" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--查看界面-->
      <el-dialog title="查看" :visible.sync="lookFormVisible" width="90%">
        <el-table :data="SKUList" border style="width: 100%">
          <el-table-column prop="SKUSupplierNo" label="商品ID" align="center"></el-table-column>
          <el-table-column prop="SKUName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="SKUUnitNo" label="单位" align="center"></el-table-column>
          <el-table-column prop="StockQty" label="库存数量" align="center"></el-table-column>
          <el-table-column prop="SKUWholesalePrice" label="批发价" align="center"></el-table-column>
          <el-table-column prop="SKUSalePrice" label="价格" align="center"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout=" prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
          style="float:right;"
        ></el-pagination>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        background
        layout=" prev, pager, next, jumper"
        @current-change="handleOutCurrentChange"
        :page-size="outpageSize"
        :total="outTotal"
        style="float:right;margin-top: 10px;"
      ></el-pagination>
    </section>
  </div>
</template>

<script>
import { PurchaseGetBranchList, PurchaseGetSKUList } from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    return {
      lookFormVisible: false,
      page: 1,
      pageSize: 20,
      total: 10000000000,
      outpage: 1,
      outpageSize: 50,
      outTotal: 100000000000,
      PurchaseList: [],
      formInline: {
        BranchName: "",
        BranchId: 0
      },
      SKUList: []
    };
  },
  created() {
    this.PurchaseGetBranchList();
  },
  methods: {
    //获取门店列表
    PurchaseGetBranchList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.outpage,
        PageSize: this.outpageSize,
        KeyWord: this.formInline.BranchName
      };
      this.PurchaseListLoading = true;
      PurchaseGetBranchList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("获取门店列表");
          console.log(vdata);
          self.PurchaseList = vdata.DataList;
          self.outTotal = vdata.TotalCount;
        }
        self.PurchaseListLoading = false;
      });
    },

    //获取商品列表
    PurchaseGetSKUList() {
      var self = this;
      this.lookFormVisible = true;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize,
        BranchId: this.formInline.BranchId,
        KeyWord: this.formInline.BranchName
      };
      PurchaseGetSKUList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("获取商品列表");
          console.log(vdata);
          self.SKUList = vdata.DataList;
          self.total = vdata.TotalCount;
        }
      });
    },
    //跳转到新页面
    handleShop(BranchId) {
      console.log(BranchId);
      this.$router.push({
        path: "/shop/performance",
        query: {
          BranchId: BranchId
        }
      });
    },


    //查看
    handleLook(row) {
      var BranchId = row.BranchId;
      if (BranchId == 0) {
        this.$message({
          message: "出现异常",
          type: "error"
        });
      }
      this.formInline.BranchId = BranchId;
      this.lookFormVisible = true;
      this.PurchaseGetSKUList();
    },
    //商品翻页
    handleCurrentChange(val) {
      this.page = val;
      this.PurchaseGetSKUList();
    },
    //店铺翻页
    handleOutCurrentChange(val) {
      this.outpage = val;
      this.PurchaseGetBranchList();
    }
  }
};
</script>

<style>
</style>